<template>
  <!-- 单个节点 -->
  <div class="visual-item">
    <!--  节点名称 节点添加的可视化列表 select -->
    <div class="node-visual-select">
      <div class="type-icon" :style="{ 'background-color': iconInfo('color') }">
        <a-icon-font class="type-icon-color" :type="iconInfo('icon')" />
      </div>
      <div class="node-name" :title="comparisonVisualItem.name">
        {{ comparisonVisualItem.name }}
      </div>
      <div class="visual-select">
        <!--  选择可视化  -->
        <a-select v-model="select" style="width: 100%;" @change="handleChange">
          <a-select-option :value="0">全部</a-select-option>
          <!--  添加的可视化名称  -->
          <a-select-option
            v-for="(chart, selectIndex) in comparisonVisualItem.visuals"
            :key="'select' + selectIndex"
            :value="chart.id"
            >{{ chart.name }}</a-select-option
          >
        </a-select>
      </div>
    </div>
    <!-- 默认渲染所有可视化   -->
    <div class="comparison-list">
      <div
        v-if="comparisonVisualItem.visuals.length === 0"
        class="node-no-visuals"
      >
        <img alt="" src="@/assets/view/category-empty.svg" />
        <div>该节点暂无可视化</div>
        <div>请先对该节点添加可视化</div>
      </div>
      <div
        v-for="(chart, index) in comparisonVisualItem.visuals"
        :key="'chart' + comparisonVisualItem.id + index"
        class="visual-chart"
        :class="{ 'select-visual-chart': chart.id === select || select === 0 }"
      >
        <Chart
          :chart-type="chart.data.chartType[0]"
          :config="chart.data.chartOptions"
        ></Chart>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'
import Chart from '@/components/chart/chart.vue'
import { nodeIconWithBackGround } from '@/components/studio/data/graph-compoments/node-icon-util'

@Component({
  components: {
    Chart,
  },
})
export default class VisualComparisonItem extends Vue {
  @Prop() comparisonVisualItem!: any
  public select: any = 0

  public beforeMount() {
    this.select = 0
  }

  /**
   * 节点图标 和 背景色
   */
  private iconInfo(type: string) {
    return nodeIconWithBackGround(
      this.comparisonVisualItem.type,
      this.comparisonVisualItem.algType
    )[type]
  }

  /**
   * 选择可视化对比  默认全部展示
   * @param value
   */
  public handleChange(value: number) {
    this.select = value
  }
}
</script>

<style lang="less" scoped>
.visual-item {
  height: 100%;

  /* 节点名称  节点可视化列表 select */
  .node-visual-select {
    align-items: center;
    display: flex;
    flex: 1;
    height: 32px;
    margin: 12px 24px;
    /* 节点图标 */
    .type-icon {
      align-items: center;
      background-color: rgba(154, 162, 255, 1);
      border-radius: 50%;
      display: flex;
      flex-shrink: 0;
      font-size: 18px;
      height: 26px;
      justify-content: center;
      line-height: 26px;
      margin-right: 8px;
      text-align: center;
      width: 26px;

      .type-icon-color {
        color: #fff;
      }
    }

    .node-name {
      margin-right: 12px;
      max-width: 30%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .visual-select {
      max-width: calc(70% - 34px);
      width: calc(70% - 34px);
    }
  }

  /* 可视化列表 */
  .comparison-list {
    background-color: #f6f6f6;
    height: calc(100% - 56px);
    overflow-y: auto;
    width: 100%;

    .visual-chart {
      box-sizing: content-box;
      height: 0;
      overflow: hidden;
      position: relative;
      width: calc(100% - 48px);
    }

    .node-no-visuals {
      align-items: center;
      box-sizing: content-box;
      display: flex;
      flex-direction: column;
      height: calc(100% - 48px);
      justify-content: center;
      width: calc(100% - 48px);
    }

    .select-visual-chart {
      height: calc(100% - 48px);
      margin: 24px;
    }

    &::-webkit-scrollbar {
      height: 4px;
      width: 4px;
    }

    &::-webkit-scrollbar-track {
      background: rgb(239, 239, 239);
      border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
      background: #bfbfbf;
      border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #333;
    }

    &::-webkit-scrollbar-corner {
      background: #179a16;
    }
  }
}
</style>
